<template>
    <div class="form-group">
        <input :type="realType" class="form-control" :value="modelValue" @input="inputChange" placeholder=" ">
        <label class="floating-label">{{ label }}</label>
        <!-- 密码框展示”显示隐藏“ -->
        <div v-if="type === 'password'" class="icon" @click="isView"><el-icon size="25" color="#b8bdcd">
                <View v-show="!viewStatus" />
                <Hide v-show="viewStatus" />
            </el-icon></div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import './index.less'

let viewStatus = ref(true)

// 使用 props 并创建计算属性
const props = defineProps({
    modelValue: {
        type: String,
        defaul: ''
    },
    label: {
        type: String,
        defaul: '标签'
    },
    type: {
        type: String,
        defaul: 'text'
    }
})
const realType = computed(() => {
    if (props.type === 'text') {
        return 'text'
    } else if (props.type === 'password') {
        if (viewStatus.value) {
            return 'password'
        } else {
            return 'text'
        }
    }
})
const emit = defineEmits(['update:modelValue']);
const inputChange = (e) => {
    emit('update:modelValue', e.target.value)
}
const isView = () => {
    viewStatus.value = !viewStatus.value
}
</script>